<article class="template animated slideInRight">
  <h4>My Characters</h4>

  <button class="dashboard-button mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" [routerLink]="['Character', {id: 'new'}]">Add</button>

  <filter-text (changed)="filterChanged($event)"></filter-text>

  <ul class="characters">
    <li *ngFor="#character of filteredCharacters | sortCharacters">

      <div class="mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title">
          <h2 class="mdl-card__title-text">{{character.id}}.
{{character.name}}</h2>
        </div>
        <div class="mdl-card__menu">
          <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" [routerLink]="['Character', {id: character.id}]">

            <div class="icon mdl-color--accent icon-ic_play_circle_filled_white_24dp"></div>

          </button>
        </div>
      </div>

    </li>
  </ul>
</article>